<template>
  <div class="loading-dot">
    <div class="demo">
      loading
      <dot>...</dot>
    </div>
  </div>
</template>

<style>
.loading-dot {
  .demo {
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    display: block;
    unicode-bidi: isolate;
    text-align: left;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    word-break: normal;
  }

  dot {
    display: inline-block; 
    width: 3ch;
    text-indent: -1ch;
    vertical-align: bottom; 
    overflow: hidden;
    animation: dot 3s infinite step-start both;
    font-family: Consolas, Monaco, monospace;
  }
}

/** 动画一定得放在最外层 */
@keyframes dot {
  33% { text-indent: 0; }
  66% { text-indent: -2ch; }
}
</style>
